<template>
  <div class="app1">
    <!-- 头部 -->
    <header>
      <!-- 已经登录 -->
      <div class="login banner vanrow" v-if="isshow">
        <van-row></van-row>
        <van-row class="van2">
          <van-col span="12">
            <van-row type="flex" align="center">
              <img
                style="margin-left: 10px"
                class="img-wrap"
                src="../../assets/images/111.jpg"
                alt=""
              />
              <span style="font-size: 18px">{{ useinfo.name }}</span>
            </van-row>
          </van-col>
          <van-col span="12" style="height: 67px; line-height: 46px">
            <van-col span="6" offset="12" type="flex" align="center">
              <van-button
                type="default"
                round
                style="font-size: 12px; width: 80px; height: 18px"
                @click="$router.push('/uase')"
                >详细资料</van-button
              >
            </van-col>
          </van-col>
        </van-row>
        <van-row>
          <van-grid class="grid" :border="false">
            <van-grid-item text="头条">
              <template #icon>{{ useinfo.art_count }}</template>
            </van-grid-item>

            <van-grid-item text="粉丝">
              <template #icon>{{ useinfo.fans_count }}</template>
            </van-grid-item>

            <van-grid-item text="帮助">
              <template #icon>{{ useinfo.follow_count }}</template>
            </van-grid-item>

            <van-grid-item text="获赞">
              <template #icon>{{ useinfo.like_count }}</template>
            </van-grid-item>
          </van-grid>
        </van-row>
      </div>
      <!-- 未登录 -->
      <div class="loginout banner logout" v-else>
        <div class="img-wrap" @click="$router.push('/login')">
          <van-image
            width="1.76rem"
            height="1.76rem"
            :src="require('../../assets/images/mobile.png')"
          />
          <span class="text">登录 / 注册</span>
        </div>
      </div>
    </header>
    <!-- 主体 -->
    <main>
      <van-grid :column-num="2" class="wor2">
        <van-grid-item text="收藏">
          <template #icon>
            <span class="toutiao toutiao-shoucang"></span>
          </template>
        </van-grid-item>
        <van-grid-item text="历史">
          <template #icon>
            <span class="toutiao toutiao-lishi"></span>
          </template>
        </van-grid-item>
        <div style="width: 100%; margin-top: 5px; margin-bottom: 5px">
          <van-cell title="路由跳转" is-link />
          <van-cell title="路由跳转" is-link />
        </div>
      </van-grid>
    </main>
    <!-- 底部 -->
    <footer>
      <van-button
        v-if="isshow"
        @click="loginout"
        style="width: 100%; color: red"
        >退出</van-button
      >
    </footer>
  </div>
</template>

<script>
import { useInfoApi } from '@/api'
export default {
  data() {
    return {
      useinfo: {}
    }
  },
  computed: {
    isshow() {
      return this.$store.getters.isgetshow
    }
  },
  created() {
    this.useInfo()
  },

  methods: {
    //退出确定
    async loginout() {
      try {
        await this.$dialog.confirm({
          title: '标题',
          message: '弹窗内容'
        })
        this.$store.commit('SET_TOKEN', '')
      } catch {}
    },
    //获取用户信息二次封装
    async useInfo() {
      if (this.isshow) {
        const aa = await useInfoApi()
        this.useinfo = aa.data.data
      }
    }
  }
}
</script>

<style scoped lang="less">
.banner {
  width: 100%;
  height: 5.33333rem;
  background: url(../../assets/images/banner.png) no-repeat 0 0 / cover;
}
.van2 {
  .img-wrap {
    width: 1.76rem;
    height: 1.76rem;
    border-radius: 50%;
    border: 0.01333rem solid #fff;
  }
}
.grid {
  :deep(.van-grid-item__content) {
    background-color: unset;
    color: #fff;
    font-size: 30px;
  }
  :deep(.van-grid-item__text) {
    color: #fff;
    font-size: 18px;
  }
}
.logout {
  display: flex;
  justify-content: center;
  .img-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .text {
      color: #fff;
      font-size: 0.4rem;
      margin-top: 0.26667rem;
    }
  }
}
.vanrow {
  display: flex;
  flex-direction: column;
  > .van-row {
    flex: 1;
  }
}
.wor2 {
  .toutiao {
    font-size: 45px;
    color: red;
  }
}
.app1 {
  background-color: #f5f7f9;
  height: calc(100vh - 100px);
}
</style>
